<template>
	<view class="maintenance-container">
		<view class="status-tabs">
			<view 
				v-for="(item, index) in statusTabs" 
				:key="index" 
				class="tab-item" 
				:class="{ active: currentTab === index }"
				@click="switchTab(index)"
			>
				{{ item.name }}
			</view>
		</view>
		
		<view class="maintenance-list">
			<view v-if="loading" class="loading">
				<uni-load-more status="loading" :contentText="loadingText"></uni-load-more>
			</view>
			
			<view v-else-if="maintenanceList.length === 0" class="empty-list">
				<image src="/static/images/empty.png" mode="aspectFit" class="empty-image"></image>
				<view class="empty-text">暂无设备维保记录</view>
			</view>
			
			<view v-else>
				<view 
					v-for="(item, index) in maintenanceList" 
					:key="index" 
					class="maintenance-item card"
					@click="goToDetail(item.maintenance_id)"
				>
					<view class="item-header">
						<view class="title">{{ item.device_info.device_name }}</view>
						<view class="type" :class="getTypeClass(item.maintenance_type)">{{ item.maintenance_type }}</view>
					</view>
					
					<view class="item-info">
						<view class="info-row">
							<text class="label">设备编号:</text>
							<text class="value">{{ item.device_info.device_number }}</text>
						</view>
						<view class="info-row">
							<text class="label">设备类型:</text>
							<text class="value">{{ item.device_info.device_type }}</text>
						</view>
						<view class="info-row">
							<text class="label">维保内容:</text>
							<text class="value">{{ item.content }}</text>
						</view>
						<view class="info-row">
							<text class="label">维保日期:</text>
							<text class="value">{{ item.maintenance_date }}</text>
						</view>
						<view class="info-row" v-if="item.responsible_person">
							<text class="label">负责人:</text>
							<text class="value">{{ item.responsible_person }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="fixed-bottom">
			<button class="submit-btn" @click="goToApply">申请设备维保</button>
		</view>
	</view>
</template>

<script>
	import { getCurrentUserDeviceMaintenanceList } from '@/api/services.js'
	import eventBus from '@/utils/eventBus.js'
	
	export default {
		data() {
			return {
				statusTabs: [
					{ name: '全部', type: '' },
					{ name: '维修', type: '维修' },
					{ name: '巡检', type: '巡检' }
				],
				currentTab: 0,
				maintenanceList: [],
				loading: false,
				loadingText: {
					contentdown: '正在加载...',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				}
			}
		},
		onLoad(options) {
			// 注册刷新事件监听器
			eventBus.on('refreshMaintenanceList', () => {
				console.log('收到刷新设备维保列表事件')
				this.getMaintenanceList()
			})
			
			// 检查是否有refresh参数
			if (options && options.refresh === 'true') {
				console.log('检测到refresh参数，正在刷新列表')
			}
			this.getMaintenanceList()
		},
		onUnload() {
			// 页面卸载时移除事件监听器
			eventBus.off('refreshMaintenanceList')
		},
		onPullDownRefresh() {
			this.getMaintenanceList(() => {
				uni.stopPullDownRefresh()
			})
		},
		methods: {
			// 切换状态标签
			switchTab(index) {
				this.currentTab = index
				this.getMaintenanceList()
			},
			
			// 获取设备维保记录列表
			async getMaintenanceList(callback) {
				this.loading = true
				try {
					const params = {}
					const currentType = this.statusTabs[this.currentTab].type
					
					if (currentType) {
						params.maintenance_type = currentType
					}
					
					try {
						// 使用API获取当前用户的设备维保记录
						const res = await getCurrentUserDeviceMaintenanceList(params)
						console.log('设备维保记录列表:', JSON.stringify(res, null, 2))
						
						this.maintenanceList = res
					} catch (apiError) {
						console.error('API请求错误:', apiError)
						
						// 显示具体的错误信息
						let errorMsg = '获取数据失败'
						if (apiError.message) {
							errorMsg += ': ' + apiError.message
						}
						
						uni.showToast({
							title: errorMsg,
							icon: 'none',
							duration: 3000
						})
						
						this.maintenanceList = []
					}
				} catch (error) {
					console.error('获取设备维保记录列表失败', error)
					
					uni.showToast({
						title: '获取数据时发生错误',
						icon: 'none',
						duration: 2000
					})
					
					this.maintenanceList = []
				} finally {
					this.loading = false
					if (typeof callback === 'function') {
						callback()
					}
				}
			},
			
			// 获取维保类型对应的样式类
			getTypeClass(type) {
				switch (type) {
					case '维修':
						return 'type-repair'
					case '巡检':
						return 'type-inspection'
					default:
						return ''
				}
			},
			
			// 跳转到详情页
			goToDetail(id) {
				uni.navigateTo({
					url: `/pages/services/device-maintenance/detail?id=${id}`
				})
			},
			
			// 跳转到申请页
			goToApply() {
				uni.navigateTo({
					url: '/pages/services/device-maintenance/apply'
				})
			}
		}
	}
</script>

<style lang="scss">
	.maintenance-container {
		padding: 20rpx;
		padding-bottom: 120rpx;
		background-color: #F8F8F8;
		min-height: 100vh;
		
		.status-tabs {
			display: flex;
			background-color: #FFFFFF;
			border-radius: 12rpx;
			margin-bottom: 20rpx;
			overflow: hidden;
			box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
			
			.tab-item {
				flex: 1;
				text-align: center;
				padding: 20rpx 0;
				font-size: 28rpx;
				color: #666;
				position: relative;
				
				&.active {
					color: #2979ff;
					font-weight: bold;
					
					&:after {
						content: '';
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
						width: 40rpx;
						height: 6rpx;
						background-color: #2979ff;
						border-radius: 3rpx;
					}
				}
			}
		}
		
		.maintenance-list {
			.loading, .empty-list {
				padding: 60rpx 0;
				text-align: center;
			}
			
			.empty-image {
				width: 200rpx;
				height: 200rpx;
				margin-bottom: 20rpx;
			}
			
			.empty-text {
				color: #999;
				font-size: 28rpx;
			}
			
			.maintenance-item {
				margin-bottom: 20rpx;
				
				.item-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;
					
					.title {
						font-size: 32rpx;
						font-weight: bold;
					}
					
					.type {
						font-size: 24rpx;
						padding: 4rpx 16rpx;
						border-radius: 20rpx;
						
						&.type-repair {
							color: #dd524d;
							background-color: rgba(221, 82, 77, 0.1);
						}
						
						&.type-inspection {
							color: #2979ff;
							background-color: rgba(41, 121, 255, 0.1);
						}
					}
				}
				
				.item-info {
					background-color: #f9f9f9;
					border-radius: 8rpx;
					padding: 20rpx;
					
					.info-row {
						display: flex;
						margin-bottom: 10rpx;
						
						&:last-child {
							margin-bottom: 0;
						}
						
						.label {
							width: 150rpx;
							color: #666;
							font-size: 26rpx;
						}
						
						.value {
							flex: 1;
							font-size: 26rpx;
						}
					}
				}
			}
		}
		
		.fixed-bottom {
			position: fixed;
			bottom: 30rpx;
			left: 30rpx;
			right: 30rpx;
			
			.submit-btn {
				background-color: #2979ff;
				color: #fff;
				border-radius: 45rpx;
				font-size: 32rpx;
				height: 80rpx;
				line-height: 80rpx;
			}
		}
	}
</style> 